


/*===========================
    6.VIDEO css 
===========================*/





.video-area{
	position: relative;
	z-index: 10;
	background-attachment: fixed;
	&::before{
		position: absolute;
		content: '';
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: $black;
		opacity: .6;
		z-index: -1;
	}
	& .shape-1{
		position: absolute;
		top: 0;
		left: 0;
		-webkit-animation: project-shape 5s infinite;
		animation: project-shape 5s infinite;
		& img{
			width: 100%;
			@media #{$laptop} {
				width: 90%;
			}
		}
	}
	& .shape-2{
		position: absolute;
		right: 0;
		bottom: 0;
		-webkit-animation: footer-shape 10s infinite;
		animation: footer-shape 10s infinite;
		& img{
			width: 100%;
			@media #{$laptop} {
				width: 90%;
			}
		}
	}

	& .video-item{
		& a{
			height: 95px;
			width: 95px;
			text-align: center;
			line-height: 95px;
			background: $theme-color;
			font-size: 24px;
			color: $white;
			position: relative;
			z-index: 10;
			&::before{
				position: absolute;
				content: '';
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				border: 1px solid #fff;
				z-index: -1;
				opacity: 0;
				@include animation(pulse-border-2 1.5s linear infinite);
			}
			&::after{
				position: absolute;
				content: '';
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				border: 1px solid #fff;
				z-index: -1;
				opacity: 0;
				@include animation(pulse-border 1s linear infinite);
			}
		}
		& .title{
			color: $white;
			font-size: 60px;
			font-weight: 700;
			text-transform: uppercase;
			line-height: 66px;
			padding-top: 77px;
			@media #{$lg} {
				font-size: 46px;
				line-height: 56px;
			}
			@media #{$md} {
				font-size: 42px;
				line-height: 52px;
			}
			@media #{$xs} {
				font-size: 34px;
				line-height: 44px;
			}
		}
	}
}


@keyframes pulse-border {
  0% {
    @include transform(scale(1));
    opacity: 1; 
}
  100% {
    @include transform(scale(1.3));
    opacity: 0; } 
}
@keyframes pulse-border-2 {
  0% {
    @include transform(scale(1));
    opacity: 1; 
}
  100% {
    @include transform(scale(1.5));
    opacity: 0; } 
}